<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>发送ajax请求</button>
    <button id="calcelBtn">取消发送</button>
    <p></p>
    <script>
        let btn = document.querySelector('button');

        let Cbtn = document.querySelector('#calcelBtn');
        let x;
        Cbtn.onclick = function(){
            // 取消请求
            x.abort();
        }
        btn.onclick = function(){
            x = new XMLHttpRequest();
            x.open('get','http://localhost/getJson');
            // 延迟请求地址
            // x.open('get','http://localhost/delayServer')

            // 设置请求头 必须在send之前设置。
            // x.setRequestHeader('content-type','application/x-www-form-urlencoded');

            // 自定义请求头
            x.setRequestHeader('aaa','123');

            x.send();

            // 调用取消请求的事件 被执行
            x.onabort = function(){
                //console.log("取消了");
                document.querySelector('p').innerHTML = '请求被取消了！';
            }
            //方式1： 设置响应体类型
            // x.responseType = 'json';

            // 超时时间3秒 （单位毫秒） 
            // 主动停止请求发送
            // x.timeout = 2000;

            // // 当请求被超时发送时触发
            // x.ontimeout = function(){
            //     document.querySelector('p').innerHTML = '抱歉，请求超时了！';
            // }           

            // 网络错误时触发
            x.onerror = function(){
                // console.log("网络错误");
                document.querySelector('p').innerHTML = '抱歉，网络错误了！';
            }

            x.onreadystatechange = function(){
                if(x.readyState === 4 && x.status === 200){
                    // console.log(x.responseText); //不能获取json数据体
                    // console.log(x.response); //支持任何格式的返回数据
                    // console.log(x.response.name);

                    // document.querySelector('p').innerHTML = x.response;
 
                    //2. json 序列化  json格式的字符串 -> 对象
                    // let json = JSON.parse(x.response);
                    // console.log('对象:',json);
                    // // 补充 对象 -> json格式字符串
                    // let str = JSON.stringify(json);
                    // console.log("string:",str);

                    // 响应状态文本
                    // console.log('状态文本：',x.statusText); 


                    // 获取响应头的值
                    let lenthStr=  x.getResponseHeader('content-length');
                    let headers =  x.getAllResponseHeaders();
                    
                    // console.log(headers);
                    console.log(lenthStr);
                    // content-length: 26
                    // content-type: application/json; charset=utf-8
                    
                }
            }
        }
    </script>
</body>
</html>